<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 120px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
                <li title="介绍"><a href="#介绍">介绍</a></li>
                <li title="5分钟上手seaJS"><a href="#5分钟上手seaJS">5分钟上手seaJS</a></li>
                <li title="API 快速参考"><a href="#API 快速参考">API 快速参考</a></li>
                <li title="结束语"><a href="#结束语">结束语</a></li>
            </ul>
        </div>
    </div>
    <!-- <h1>SeaJS</h1> -->
    <section class="markdown">
        <p>
            <a href="https://seajs.github.io/seajs/"><img src="/aifish/assets/img/seajs.png"  alt="logo"></a>
        </p>
        <h2 id="介绍"><span>介绍</span><a href="#介绍" class="anchor">#</a></h2>
        <p><b>SeaJS</b> 追求简单、自然的代码书写和组织方式，具有以下核心特性：</p>
        <ul>
            <li><strong>简单友好的模块定义规范</strong>：Sea.js
              遵循 <a href="https://github.com/cmdjs/specification/blob/master/draft/module.md" target="_blank">CMD</a>
              规范，可以像 <a href="http://nodejs.org/" target="_blank">Node.js</a> 一般书写模块代码。
            </li>
            <li><strong>自然直观的代码组织方式</strong>：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。</li>
        </ul>
        <p>
            Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。
        </p>
        <h2 id="5分钟上手seaJS"><span>5分钟上手seaJS</span><a href="#5分钟上手seaJS" class="anchor">#</a></h2>
        <h3>目录结构</h3>
        <p>例子的代码结构：</p>
<pre>
    <code class="lang-html">    examples/
  |-- sea-modules      //存放 seajs、jquery 等文件，这也是模块的部署目录
  |-- static           //存放各个项目的 js、css 文件
  |     |-- hello
  |     |-- lucky
  |     `-- todo
  `-- app              //存放 html 等文件
        |-- hello.html
        |-- lucky.html
        `-- todo.html</code>
</pre>
        <p>我们从 <code>hello.html</code> 入手，来瞧瞧使用 Sea.js 如何组织代码。</p>
        <h3>在页面中加载模块</h3>
        <p>
          在 <code>hello.html</code> 页尾，通过 <code>script</code> 引入 <code>sea.js</code> 后，有一段配置代码：
        </p>
<pre>
        <code class="lang-javascript">    // seajs 的简单配置
    seajs.config({
      base: "../sea-modules/",
      alias: {
        "jquery": "jquery/jquery/1.10.1/jquery.js"
      }
    })

    // 加载入口模块
    seajs.use("../static/hello/src/main")</code>
</pre>
        <p>
          <code>sea.js</code> 在下载完成后，会自动加载入口模块。页面中的代码就这么简单。
        </p>
        <h3>模块代码</h3>
        <p>
          这个小例子有两个模块 <code>spinning.js</code> 和 <code>main.js</code>，遵循统一的写法：
        </p>
<pre>
        <code class="lang-javascript">    // 所有模块都通过 define 来定义
    define(function(require, exports, module) {

      // 通过 require 引入依赖
      var $ = require('jquery');
      var Spinning = require('./spinning');

      // 通过 exports 对外提供接口
      exports.doSomething = ...

      // 或者通过 module.exports 提供整个接口
      module.exports = ...

    });</code>
</pre>
        <p>上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js，一切都很自然。</p>
        <h2 id="API 快速参考"><span>API 快速参考</span><a href="#API 快速参考" class="anchor">#</a></h2>
        <p>下面列举了 Sea.js 的常用 API。只要掌握这些用法，就可以娴熟地进行模块化开发。</p>
        <h3>seajs.config</h3>
        <p>用来对 Sea.js 进行配置。</p>
        <pre><code class="lang-javascript">    seajs.config({

        // 设置路径，方便跨目录调用
        paths: {
        'arale': 'https://a.alipayobjects.com/arale',
        'jquery': 'https://a.alipayobjects.com/jquery'
        },

        // 设置别名，方便调用
        alias: {
        'class': 'arale/class/1.0.0/class',
        'jquery': 'jquery/jquery/1.10.1/jquery'
        }

        });</code></pre>
        <p>更多配置项请参考：<a href="https://github.com/seajs/seajs/issues/262" class="issue-link js-issue-link tooltipped tooltipped-ne" data-error-text="Failed to load issue title" data-id="5516107" data-permission-text="Issue title is private" aria-label="#262, 配置">#262</a></p>
        <h3>seajs.use</h3>
        <p>用来在页面中加载一个或多个模块。</p>
        <pre><code class="lang-javascript">   // 加载一个模块
    seajs.use('./a');

    // 加载一个模块，在加载完成时，执行回调
    seajs.use('./a', function(a) {
      a.doSomething();
    });

    // 加载多个模块，在加载完成时，执行回调
    seajs.use(['./a', './b'], function(a, b) {
      a.doSomething();
      b.doSomething();
    });</code></pre>
        <p>更多用法请参考：<a href="https://github.com/seajs/seajs/issues/260" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5476331" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/260">#260</a></p>
        <h3>define</h3>
        <p>用来定义模块。Sea.js 推崇一个模块一个文件，遵循统一的写法：</p>
        <pre><code class="lang-javascript">    define(function(require, exports, module) {

      // 模块代码

    });</code></pre>
        <p>也可以手动指定模块 id 和依赖，详情请参考：<a href="https://github.com/seajs/seajs/issues/242" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5382447" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/242">#242</a><br><code>require</code>, <code>exports</code> 和 <code>module</code> 三个参数可酌情省略，具体用法如下。</p>
        <h3>require</h3>
        <p><code>require</code> 用来获取指定模块的接口。</p>
        <pre><code class="lang-javascript">   define(function(require) {

      // 获取模块 a 的接口
      var a = require('./a');

      // 调用模块 a 的方法
      a.doSomething();
    });</code></pre>
        <p>注意，<code>require</code> 只接受字符串直接量作为参数，详细约定请阅读：<a href="https://github.com/seajs/seajs/issues/259" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5466706" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/259">#259</a></p>
        <h3>require.async</h3>
        <p>用来在模块内部异步加载一个或多个模块。</p>
        <pre><code class="lang-javascript">   define(function(require) {

      // 异步加载一个模块，在加载完成时，执行回调
      require.async('./b', function(b) {
        b.doSomething();
      });

      // 异步加载多个模块，在加载完成时，执行回调
      require.async(['./c', './d'], function(c, d) {
        c.doSomething();
        d.doSomething();
      });

    });</code></pre>
        <p>详细说明请参考：<a href="https://github.com/seajs/seajs/issues/242" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5382447" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/242">#242</a></p>
        <h3>exports</h3>
        <p>用来在模块内部对外提供接口。</p>
        <pre><code class="lang-javascript">   define(function(require, exports) {

      // 对外提供 foo 属性
      exports.foo = 'bar';

      // 对外提供 doSomething 方法
      exports.doSomething = function() {};

    });</code></pre>
        <p>详细说明请参考：<a href="https://github.com/seajs/seajs/issues/242" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5382447" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/242">#242</a></p>
        <h3>module.exports</h3>
        <p>与 <code>exports</code> 类似，用来在模块内部对外提供接口。</p>
        <pre><code class="lang-javascript">   define(function(require, exports, module) {

      // 对外提供接口
      module.exports = {
        name: 'a',
        doSomething: function() {};
      };

    });</code></pre>
        <p><code>module.exports</code> 与 <code>exports</code> 的区别，以及详细说明请参考：<a href="https://github.com/seajs/seajs/issues/242" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="5382447" data-permission-text="Issue title is private" data-url="https://github.com/seajs/seajs/issues/242">#242</a></p>
        <p>以上 7 个接口是最常用的，要牢记于心。</p>
        <p>这里提供一个不错的社区贡献的 API 文档：<a href="http://yslove.net/seajs/">http://yslove.net/seajs/</a></p>
        <h2 id="结束语"><span>结束语</span><a href="#结束语" class="anchor">#</a></h2>
        <p>
          怎么样，Sea.js 入门真的只需 5 分钟吧：）
        </p>
        <p>
          使用 Sea.js，可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。Sea.js
          期待能给你提供简单、极致的模块化开发体验。我相信，你会爱上她的。
        </p>
        </section>
</article>